<!DOCTYPE html>
<html lang="en">
<head>
    <title>重复文件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/easyui/themes/default/easyui.css">
    <link href="static/easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
    <link href="static/easyui/demo/demo.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="static/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/js/main.js"></script>
</head>
<body>
<div class="container">
    <a href="javascript:search()" class="easyui-linkbutton" >去重</a>
    <table id="dg"></table>
    <script type="text/javascript">

        $(function () {
            $("#dg").datagrid({
                title: "资料列表",
                method: "get",
                url: 'json/duplication_filename.json',
                striped: true,
                pagination: true,
                pageNumber: 1,
                pageList: [2, 5, 10, 20, 30],
                rownumbers: true,
                pagePosition: "bottom",
                columns: [[
                    {field: "ck", checkbox: "true"},
                    {field: "文件1", title: '文件1', width: 200, formatter: formatFile},
                    {field: "文件2", title: '文件1', width: 200},
                    {field: "文件3", title: '文件3', width: 200},
                    {field: "文件4", title: '文件4', width: 200},
                    {field: "文件5", title: '文件5', width: 200},
                    {field: "文件6", title: '文件6', width: 200},
                    {field: "文件7", title: '文件7', width: 200},
                    {field: "文件8", title: '文件8', width: 200},
                    {field: "文件9", title: '文件9', width: 200},
                    {field: "文件10", title: '文件10', width: 200},
                ]],
                loadFilter: function (data) {
                    var pager = $('#dg').datagrid('getPager'); // 获取分页器对象
                    var options = pager.pagination('options'); // 获取分页器的选项
                    // 注意：以下代码是客户端分页的示例，但通常不推荐这样做，因为性能问题
                    var start = (options.pageNumber) * options.pageSize;
                    var rows = data.slice(start, start + options.pageSize);
                    console.log({total: data.length, rows: rows})
                    return {total: data.length, rows: rows};

                }
            });
            // 绑定 click 事件处理器，阻止默认的行选择行为
            $('#dg').datagrid('getPanel').on('click', 'tbody tr.datagrid-row', function(e){
                e.stopPropagation(); // 阻止事件冒泡，防止触发默认的行选择
            });

// 绑定 click 事件处理器，仅当点击复选框时选择行
            $('#dg').datagrid('getPanel').on('click', 'td[field=ck] input[type=checkbox]', function(){
                var row = $(this).closest('tr.datagrid-row');
                $('#dg').datagrid('selectRecord', row.data('recordid'));
            });

// 如果你使用了 rownumbers，可能还需要阻止 rownumbers 列的选择行为
            $('#dg').datagrid('getPanel').on('click', 'td[field=rownumbers]', function(e){
                e.stopPropagation();
            });
            function formatFile(value, row, index) {
                // value 是该列的值，row 是整个行的 JSON 对象，index 是行索引
                return '<div class="custom-html">' + value + '</div>';
                // 返回包含 HTML 的字符串，将会在 datagrid 单元格中渲染
            }
        })
        function remove(id) {
            $.messager.confirm("提示", '确认删除？', function (data) {
                if (data) {
                    $.messager.alert("提示", "删除成功！");
                }
            })
        }

        function toRename(id) {
            $('#dlg-rename').dialog('open');
        }

        function rename() {
            $.messager.alert('提示', '文件名修改成功！');
            $('#dlg-rename').dialog('close');
        }

        function preview(id) {
            window.open('json/data_list.json', '_blank'); // _blank 表示在新的标签页中打开
        }
    </script>
</div>
</body>
</html>